import React, { Component } from 'react';
import * as echarts from 'echarts';
import styled from 'styled-components'
import '@/assets/css/Pie.css'
import Pts from 'prop-types';
class Pie extends Component {
    // 定义props属性的类型规则
    static propTypes = {
        id: Pts.string.isRequired,
        subtitle: Pts.string.isRequired,
        text: Pts.string.isRequired,
    }
    // 定义props默认值
    static defaultProps = {
        w: '33.3%',
        h: '500px'
    }
    render() {
        // console.log('饼图数据', this.props.data)
        var chartDom = document.getElementById(this.props.id);
        // console.log('dom节点', chartDom);
        // 判断有DOM后,再执行 echarts的初始化
        if (chartDom) {
            var myChart = echarts.init(chartDom);

            var option;

            option = {
                title: { // 图表的标题
                    text: this.props.text,
                    subtext: '2022年7月',
                    left: 'center'
                },
                tooltip: { // 提示框
                    trigger: 'item'
                },
                // legend: { // 图例
                //     orient: 'vertical',
                //     left: 'left',
                //     top: '20px'
                // },
                series: [  // 数据
                    {
                        name: this.props.subtitle,
                        type: 'pie',
                        radius: '70%',
                        data: this.props.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 判断是否显示图例
            if (this.props.legend) {
                option.legend = {
                    orient: 'vertical',
                    left: 'left',
                    top: '20px'
                }
            }

            option && myChart.setOption(option);
        }



        return (
            <div id={this.props.id} style={{ width: this.props.w, height: this.props.h }}></div>
        );
    }

    componentDidMount() {
        // 为什么不在这些echarts 

    }
}


// 使用css-in-js 设置样式
// const Title = styled.section`
//     width:33.3%;
//     height:500px
// `
export default Pie;
